<template>
    <div>
      <head1></head1>
      <!-- <van-nav-bar title="首页" left-text="返回" left-arrow>
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar> -->
      <div>
        <van-button type="primary" @click="zy">个人主页</van-button>
        <van-row>
          <van-col span="4" style="font-size: 16px; color: #666">类别：</van-col>
          <van-col span="20">
            <van-button v-for="(i, x) in tlist" :key="x" @click="addType(i.id)">{{
              i.name
            }}</van-button>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="4">标签：</van-col>
          <van-col span="20">
            <van-button
              v-for="(i, x) in taglist"
              :key="x"
              @click="addlabel(i.id)"
              >{{ i.name }}</van-button
            >
          </van-col>
        </van-row>
  
        <van-row>
          <van-col span="12">
            <van-button @click="sx">已上线</van-button>
            <van-button @click="jj">即将上线</van-button>
          </van-col>
          <van-col span="12" style="text-align: right">
            <van-button @click="zx">最新</van-button>
            <van-button @click="zr">最热</van-button></van-col
          >
        </van-row>
  
        <van-card
          :price="i.price"
          desc="描述信息"
          :title="i.name"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          v-for="(i, index) in clist"
          :key="index"
        >
        <template #footer>
      <van-button size="mini" @click="xq(i.id)">详情</van-button>
      <van-button size="mini" @click="buy(i.id)" v-if="i.type==3">加入购物车</van-button>
    </template>
  </van-card>
  
        <van-pagination
          v-model="currentPage"
          :total-items="total"
          :items-per-page="page_size"
          @change="getCourse"
        />
  
        <!-- <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">课程</van-tabbar-item>
    <van-tabbar-item icon="search">路径</van-tabbar-item>
    <van-tabbar-item icon="friends-o">讨论区</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  </van-tabbar> -->
      </div>
      <footer1></footer1>
    </div>
  </template>
  
  <script>
  import head1 from "@/components/head1";
  import footer1 from "@/components/footer1";
  export default {
    data() {
      return {
        active: 0,
        currentPage: 1,
        total: 0,
        page_size: 2,
        clist: [],
        tlist: [],
        taglist: [],
        typeid: 0,
        tagid: 0,
        online: 0,
        orderbyid: 0,
      };
    },
    components: {
      head1: head1,
      footer1: footer1,
    },
    methods: {
      buy(id){
           this.axios.post('addcart',{"userid":1,"goodsid":id}).then(res=>{
  
           })
         },
      addType(id) {
        this.typeid = id;
        this.getCourse(1);
      },
      addlabel(id) {
        this.tagid = id;
        this.getCourse(1);
      },
      sx() {
        this.online = 1;
        this.getCourse(1);
      },
      jj() {
        this.online = 2;
        this.getCourse(1);
      },
      zx() {
        this.orderbyid = 1;
        this.getCourse(1);
      },
      zr() {
        this.orderbyid = 2;
        this.getCourse(1);
      },
      zy(){
        this.$router.push("/users")
      },
      getCourse(page) {
        this.axios
          .get(
            "getTags?page=" +
              page +
              "&type=" +
              this.typeid +
              "&tagid=" +
              this.tagid +
              "&online=" +
              this.online +
              "&orderbyid=" +
              this.orderbyid
          )
          .then((res) => {
            this.clist = res.data.clist;
            this.total = res.data.total;
            this.page_size = res.data.page_size;
            this.tlist = res.data.tlist;
            this.taglist = res.data.taglist;
          });
      },
      xq(id){
        this.$router.push("/detail/"+id)
      }
    },
    mounted() {
      this.getCourse(1);
    },
  };
  </script>
  
  <style>
  </style>